<!DOCTYPE html>
<html>
    <head>
        <title>智能人脸追踪系统 - 云台未连接</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
        <meta name="description" content="智能人脸追踪系统">
        <meta name="theme-color" content="#f44336">

        <!-- 从后端获取舵机引脚号 -->
        <script>
            window.PAN_PIN = {{ pan_pin }};
            window.TILT_PIN = {{ tilt_pin }};
        </script>
    </head>
    <body>
        <div class="container">
            <h1>智能人脸追踪系统</h1>
            
            <div class="video-container">
                <img src="{{ url_for('video_feed') }}" alt="视频流">
            </div>
            
            <div class="status error" id="status">
                ⚠️ 云台控制器未连接 - 仅视频检测模式
            </div>
            
            <div class="content-wrapper">
                <div class="controls disabled">
                    <div class="control-group">
                        <h3>云台控制 (已禁用)</h3>
                        <div class="info-box">
                            <p><strong>当前状态：</strong>{{ tracking_state }}</p>
                            <p><strong>水平角度：</strong>{{ pan_angle }}°</p>
                            <p><strong>垂直角度：</strong>{{ tilt_angle }}°</p>
                        </div>
                        
                        <div class="disabled-message">
                            <h4>云台控制不可用</h4>
                            <p>请检查以下项目：</p>
                            <ul>
                                <li>串口设备是否连接 (/dev/ttyS1)</li>
                                <li>Arduino控制器是否正常工作</li>
                                <li>舵机电源是否接通</li>
                                <li>串口权限是否正确</li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <div class="info-panel">
                    <h3>系统信息</h3>
                    <div class="info-item">
                        <span class="label">运行模式：</span>
                        <span class="value">仅检测模式</span>
                    </div>
                    <div class="info-item">
                        <span class="label">人脸检测：</span>
                        <span class="value status-active">正常</span>
                    </div>
                    <div class="info-item">
                        <span class="label">云台控制：</span>
                        <span class="value status-disabled">已禁用</span>
                    </div>
                    <div class="info-item">
                        <span class="label">自动追踪：</span>
                        <span class="value status-disabled">不可用</span>
                    </div>
                </div>
            </div>
            
            <div class="footer">
                <p>智能人脸追踪系统 v2.0.0 - MCP版本</p>
                <p>如需启用云台控制，请检查硬件连接后重启系统</p>
            </div>
        </div>

        <style>
            .error {
                background-color: #ffebee;
                color: #c62828;
                border-left: 4px solid #f44336;
            }
            
            .controls.disabled {
                opacity: 0.6;
                pointer-events: none;
            }
            
            .disabled-message {
                background-color: #fff3e0;
                border: 1px solid #ff9800;
                border-radius: 4px;
                padding: 15px;
                margin-top: 15px;
            }
            
            .disabled-message h4 {
                margin-top: 0;
                color: #e65100;
            }
            
            .disabled-message ul {
                margin: 10px 0;
                padding-left: 20px;
            }
            
            .disabled-message li {
                margin: 5px 0;
            }
            
            .info-box {
                background-color: #f5f5f5;
                border-radius: 4px;
                padding: 15px;
                margin: 15px 0;
            }
            
            .info-box p {
                margin: 5px 0;
            }
            
            .status-active {
                color: #4caf50;
                font-weight: bold;
            }
            
            .status-disabled {
                color: #f44336;
                font-weight: bold;
            }
            
            .footer {
                text-align: center;
                margin-top: 30px;
                padding: 20px;
                background-color: #f5f5f5;
                border-radius: 4px;
                color: #666;
            }
            
            .footer p {
                margin: 5px 0;
            }
        </style>
    </body>
</html>
